<template>
  <div class="manager">
    <div class="container pt-4">
      <div class="row">
        <div class="col-12">
          <div class="pointsRule">
            <ul id="list">
              <li style="z-index:6;background-image: linear-gradient(to right, #005bea ,#00c6fb)" class="green" @click="gotoHome()"><a><span>首页</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:5;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoNav()"><a><em class="before"></em><span>预算管理</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:4;background-color:#ffc107;"><a><em class="before"></em><span  style="color: #4e555b;">利润</span><i style="background-color:#ffc107;"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="managerCon">
      <div class="container">
        <div class="row justify-content-center">
          <h2 class="text-primary">利润驾驶舱</h2>
        </div>
        <div class="content">
          <ul class="pl-0 row ">
            <li class="col-3">
              <div class="row justify-content-center">
                <div class="title">目标值</div>
              </div>
              <div class="num">{{fixNum(incomeTargetAmount - costTarget - costTargetAmount)}}万</div>
            </li>
            <li class="col-3">
              <div class="row justify-content-center">
                <div class="title">预测值</div>
              </div>
              <div v-bind:class="['num ', (((incomeAmount - cost - costAmount) - (incomeNowMonth - costMonthAmount - costNowMonth)) + (incomeLastMonthAmount - costLastMonthAmount - costLastMonth)*month)>=(incomeTargetAmount - costTarget - costTargetAmount) ? 'text-success' : 'text-danger']"> {{fixNum(((incomeAmount - cost - costAmount) - (incomeNowMonth - costMonthAmount - costNowMonth)) + (incomeLastMonthAmount - costLastMonthAmount - costLastMonth)*month)}}万</div>
            </li>
            <li class="col-3">
              <div class="row justify-content-center">
                <div class="title">实际值</div>
              </div>
              <div class="num">{{fixNum(incomeAmount - cost - costAmount)}}万</div>
            </li>
            <li class="col-3">
              <div class="row justify-content-center">
                <div class="title">当月</div>
              </div>
              <div class="num">{{fixNum(incomeNowMonth - costMonthAmount - costNowMonth)}}万</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="managerCon2 mt-3">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="content">
              <ul class="pl-0 row ">
                <li class="col-3">
                  <div class="row justify-content-center">
                    <div class="title">收入</div>
                  </div>
                  <div class="num">
                    <div class="font-weight-normal">目标值：{{fixNum(incomeTargetAmount)}}万元</div>
                    <div>实际值：<span v-bind:class="incomeAmount > incomeTargetAmount ? 'text-success' : 'text-danger'">{{fixNum(incomeAmount)}}万元</span></div>
                  </div>
                </li>
                <li class="col-3">
                  <div class="row justify-content-center">
                    <div class="title">成本</div>
                  </div>
                  <div class="num" >
                    <div class="font-weight-normal">目标值：{{fixNum(costTarget)}}万元</div>
                    <div>实际值：<span v-bind:class="cost < costTarget ? 'text-success' : 'text-danger'">{{fixNum(cost)}}万元</span></div>
                  </div>
                </li>
                <li class="col-3">
                  <div class="row justify-content-center">
                    <div class="title">毛利率</div>
                  </div>
                  <div class="num">
                    <div class="font-weight-normal">目标值：{{init(incomeTargetAmount, costTarget)}}%</div>
                    <div >实际值：<span v-bind:class="init(incomeAmount, cost) > init(incomeTargetAmount, costTarget) ? 'text-success' : 'text-danger'">{{init(incomeAmount, cost)}}%</span></div>
                  </div>
                </li>
                <li class="col-3">
                  <div class="row justify-content-center">
                    <div class="title">费用</div>
                  </div>
                  <div class="num">
                    <div class="font-weight-normal">目标值：{{fixNum(costTargetAmount)}}万元</div>
                    <div >实际值：<span v-bind:class="costAmount < costTargetAmount ? 'text-success' : 'text-danger'">{{fixNum(costAmount)}}万元</span></div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "manager",
      data(){
        return{
          isActive:0,
          costNowMonth: 0,  //当月费用
          incomeNowMonth: 0,  //当月收入
          costTargetAmount: 0,
          incomeTargetAmount: 0,
          costAmount: 0,  //累积费用
          incomeAmount: 0, //累积收入
          loading: {},
          income: 0,
          incomeTarget: 0,
          cost: 0,
          costTarget: 0,
          costMonthAmount: 0,
          costLastMonthAmount: 0,
          costLastMonth: 0,
          incomeLastMonthAmount: 0,
          month: 12,
          orgid: window.sessionStorage.getItem('orgid')
        }
      },
      created() {
        this.month = 12 - new Date().getMonth()
        this.getAllCost()
        this.getAllIncome()
        this.getAllProfit()
      },
      methods: {
        //跳转到首页
        // gotoHome: function(){
        //   this.$router.push("/")
        //   this.isActive=0
        // },
        //跳转到书吧
        gotoNav: function(){
          this.$router.push("/nav2");
        },
        getAllCost(){
          // this.loading = this.$loading({
          //   lock: true,//lock的修改符--默认是false
          //   text: 'Loading',//显示在加载图标下方的加载文案
          //   spinner: 'el-icon-loading',//自定义加载图标类名
          //   background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
          //   target: document.querySelector('#table')//loadin覆盖的dom元素节点
          // });
          this.$http.get(
            '/api/getCostSum',
            {
              params: {
                type: 3 + this.orgid
              }
            }).then(res => {
            this.costAmount = res.data.sumAmount
            this.costNowMonth = res.data.nowMonthAmount
            this.costTargetAmount = res.data.targetAmount
            this.costLastMonthAmount = res.data.lastMonthAmount
            // this.loading.close()
          })
        },
        getAllIncome(){
          this.$http.get(
            '/api/getCostSum',
            {
              params: {
                type: 1 + this.orgid
              }
            }).then(res => {
            this.incomeAmount = res.data.sumAmount
            this.incomeNowMonth = res.data.nowMonthAmount
            this.incomeTargetAmount = res.data.targetAmount
            this.incomeLastMonthAmount = res.data.lastMonthAmount
            // this.loading.close()
          })
        },
        getAllProfit () {
          this.$http.get(
            '/api/getCostSum',
            {
              params: {
                type: 4 + this.orgid
              }
            }).then(res => {
            this.cost = res.data.sumAmount
            this.costTarget = res.data.targetAmount
            this.costMonthAmount = res.data.nowMonthAmount
            this.costLastMonth = res.data.lastMonthAmount
            // this.loading.close()
          })
        },
        fixNum (num) {
          return (num/10000).toFixed(2)
        },
        percentNum (num) {
          return (num * 100).toFixed(2)
        },
        gotoHome: function(){
          this.$router.push("/index")
          this.isActive=0
        },
        init(income, cost){
          if (income === 0 || cost === 0) {
            return 0
          }else {

            const data = (income - cost) / income
            return (data * 100).toFixed(2)
            // if (data < 100){
            //   return parseFloat(data).toFixed(2) + '元'
            // }else {
            //   return this.fixNum(data) + '万元'
            // }
          }
        }
      }
    }
</script>

<style scoped>
  .manager{
    height: 120%;
  }
  .managerCon h2{
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 3px;
    position: relative;
    top: 20px;
    background: white;
    padding: 0 10px;
  }
  .managerCon2 h2{
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 3px;
  }
  .managerCon .content{
    /*background: url("~@/assets/img/bg1.jpg") no-repeat;*/
    background-size: 100% 100%;
    padding-top: 35px;
    padding-bottom: 35px;
  }
  .managerCon .content ul li{
    list-style: none;
    text-align: center;
    padding: 0 45px;
  }
  .managerCon2 .content ul li{
    list-style: none;
    text-align: center;
    padding: 0 10px;
  }
  .managerCon .content ul li .title{
    z-index: 999;
    background: white;
    font-size: 20px;
    color: #95999c;
    position: relative;
    top: 17px;
    letter-spacing: 2px;
    padding: 0 5px;
  }
  .managerCon2 .content ul li .title{
    z-index: 999;
    background: white;
    font-size: 18px;
    color: #95999c;
    position: relative;
    top: 17px;
    padding: 0 10px;
  }
  .managerCon .content ul li .num{
    font-size: 26px;
    letter-spacing: 2px;
    font-weight: bold;
    border: 3px solid #7abaff;
    border-radius: 10px;
    padding: 30px 20px;

  }
  .managerCon2 .content ul li .num{
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: bold;
    border: 3px solid #7abaff;
    border-radius: 10px;
    padding: 26px 10px;

  }
  .managerCon2 .content ul li .num div{
    margin: 10px 0;
  }


  .manager .navList li {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .manager .navList li div{
    background: #eeeeee;
    color: #005cbf;
    padding: 12px 40px;
    border-radius: 5px;
    font-weight: bold;
    letter-spacing: 5px;
    font-size: 18px;
  }
  .manager .navList .titleActive{
    background: #005cbf;
    color: white;
  }
</style>
